<template>
  <div>
    <SearchContainer @search="searchData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="form-style-flex" :model="formState" :label-col="{ style: { width: '80px' } }">
        <a-form-item label="" name="zjm">
          <a-input v-model:value="formState.zjm" class="w-64" placeholder="票据号/销售单号/姓名/助记码/卡号" />
        </a-form-item>
        <a-form-item label="收费时间" name="dateRange">
          <a-range-picker v-model:value="formState.dateRange" class="w-64" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item label="" name="status" class="w-1/3 ml-10">
          <a-radio-group v-model:value="formState.status" @change="onChangeStatus">
            <a-radio value="">全部</a-radio>
            <a-radio :value="'1'">正常</a-radio>
            <a-radio :value="'2'">待退费</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2">
      <BaseTable
        :data-source="tableData"
        fill
        :expanded-row-keys="expandedRowKeys"
        :loading="loading"
        :scroll="{ x: 1800 }"
        column-code="000424"
        :pagination="pagination"
      >
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'processStatus'">
            <a-tag v-if="record.processStatus === '1'" color="green">加工中</a-tag>
            <a-tag v-else-if="record.processStatus === '2'" color="blue">已完成</a-tag>
            <a-tag v-else-if="record.processStatus === '3'" color="blue">已质检</a-tag>
            <a-tag v-else color="red">待加工</a-tag>
          </template>
          <template v-if="column.dataIndex === 'chargeBackStatus'">
            <a-tag v-if="record.chargeBackStatus === '正常'" color="green">{{ record.chargeBackStatus }}</a-tag>
            <a-tag v-else color="red">{{ record.chargeBackStatus }}</a-tag>
          </template>
          <template v-if="column.dataIndex === 'pjhm'">
            <PopoverTable :config="detailConfig" :params="{ pjhm: record.pjhm }" :width="1500">
              <template #bodyCell="{ column: popColumn, record: popRecord }">
                <template v-if="popColumn.dataIndex == 'eyesType'">
                  <span v-if="popRecord.eyesType == '1'">左眼</span>
                  <span v-else-if="popRecord.eyesType == '2'">右眼</span>
                  <span v-else-if="popRecord.eyesType == '3'">其他</span>
                  <span v-else>/</span>
                </template>
                <!-- 1：正常 2：作废 3：已退费 -->
                <template v-if="popColumn.dataIndex === 'status'">
                  <span v-if="popRecord.status == 1" class="text-blue-600">正常</span>
                  <span v-else-if="popRecord.status == 2" class="text-red-600">待退费</span>
                  <span v-else-if="popRecord.status == 3" class="text-teal-600">已退费</span>
                  <span v-else>-</span>
                </template>
                <template v-if="popColumn.dataIndex === 'isOutside'">
                  <span v-if="popRecord.isOutside == 1">是</span>
                  <span v-else>否</span>
                </template>
                <template v-if="popColumn.dataIndex === 'payItemName'">
                  <MedicineInfo :value="{ mc: popRecord.payItemName, gg: popRecord.specification }" />
                </template>
                <template v-if="popColumn.dataIndex === 'num'">
                  <span>{{ popRecord.num }}</span
                  ><span class="text-gray-400 ml-2 text-xss">{{ popRecord.unit }}</span>
                </template>
                <template v-if="popColumn.dataIndex === 'pupilDistance'">
                  <span v-if="popRecord.pupilDistance">{{ popRecord.pupilDistance }}</span
                  ><span v-else>-</span>
                </template>
                <template v-if="popColumn.dataIndex === 'axial'">
                  <span v-if="popRecord.axial">{{ popRecord.axial }}</span
                  ><span v-else>-</span>
                </template>
              </template>
              {{ record.pjhm }}
            </PopoverTable>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-space>
              <!-- 1：正常 2：待退款 -->
              <a-button v-if="record.chargeStatus === '1'" type="link" :disabled="record.chargeBackStatus !== '正常'" size="small" @click="openModel(record)"
                >退单</a-button
              >
              <BaseButton v-if="record.chargeStatus === '2'" confirm-text="确认撤销？" type="text" danger size="small" @click="onChanelRefund(record)"
                >撤销退单</BaseButton
              >
            </a-space>
          </template>
        </template>
      </BaseTable>
    </a-card>
    <Edit v-model:open="open" :row-data="rowData" @ok="getData" />
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
// import { message } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import Edit from './Edit.vue'

const rowData = ref(null)
const formRef = ref(null)

const open = ref(false)

const formState = ref({
  zjm: '',
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  status: ''
})
const detailConfig = ref({
  url: '/optometry/ooadolescentcheck/getOoOpticianChargeMxResponse',
  columnCode: '000426',
  rowKey: 'id',
  formatResult: (data) => {
    return data.map((item, index) => ({
      ...item,
      xh: index + 1
    }))
  }
})

const searchData = () => {
  getData()
}
const openModel = (record) => {
  open.value = true
  rowData.value = record
}
const onChangeStatus = () => {
  searchData()
}
const onChanelRefund = async (row) => {
  const { code, msg } = await post('/optometry/ooadolescentcheck/doSaveReverseChargeback', {
    ooLsh: row.ooLsh
  })
  if (code !== 0) return message.error(msg || '操作失败')
  message.success(msg || '操作成功')
  getData()
}

const { loading, tableData, pagination, getData } = useTable({
  url: '/optometry/ooadolescentcheck/getOoOpticianChargeResponse',
  immediate: true,
  formatParams: () => {
    return {
      stdate: formState.value.dateRange?.[0],
      eddate: formState.value.dateRange?.[1],
      zjm: formState.value.zjm,
      status: formState.value.status
    }
  },
  onSuccess: () => {
    // tableData.value = [{}]
  }
})
</script>
